<template>
	<div class="goods-submit-goods">
		<div v-show="!addressFlag" class="flex flex-item-v-center addr-box" @click="toAddadress">
			<img class="addr-icon" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/addr_default.png">
			<div class="flex flex-1 flex-c addr-content">
				<div>
					<span class="no-address">添加收货地址+</span>
				</div>
			</div>
			<img class="more-icon" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/cor_right.png">
		</div>
		<div class="info" v-show="addressFlag" @click="toSetletAddresslist">
			<img class="address-icon" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/addr_default.png" />
			<p class="content-p-fir">
				<span>{{this.$route.query.frompage == '/setlet-addresslist'? goodsIndex.consignee:address.consignee}}</span>
				<span class="content-phone">{{this.$route.query.frompage == '/setlet-addresslist'? goodsIndex.phone:address.phone}}</span>
			</p>
			<p class="content-p-sec" v-if="this.$route.query.frompage == '/setlet-addresslist'">
				{{goodsIndex.provinceName}}-{{goodsIndex.cityName}}-{{goodsIndex.areaName}}{{goodsIndex.townName ? "-"+goodsIndex.townName:''}}-{{goodsIndex.address}}
			</p>
			<p class="content-p-sec" v-else>
				{{address.provinceName}}-{{address.cityName}}-{{address.areaName}}{{address.townName ? "-"+address.townName:''}}-{{address.address}}
			</p>
			<img class="to-list-address" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/cor_right.png" />
		</div>
		<div class="identity margin-t flex">
			<input class="info-input" type="text" @keyup="showDel" v-model="identity" maxlength='18' placeholder="海外购商品,因海关需要,请填写收货人的身份证号" />
			<img v-if="this.identity" v-show="identityFlag" @click="clearidentity" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/deltext-icon.png"/>
			<span class="info-save" :class="this.saveActive" @click="identitySave">{{buttonText}}</span>
		</div>
		<div class="goods-item-info">
			<div class="item-top">
				<div class="left-img left">
					<img class="left-img-in" :src="goodsIndex.mainImg"/>
				</div>
				<div class="word left">
					<p class="word-title els">{{goodsIndex.goodsName}}</p>
					<p class="word-color">规格：{{goodsIndex.normName}}</p>
					<p class="word-price">价格：￥{{goodsIndex.price|fixedTwo()}}</p>
				</div>
				<div class="word-right left clear-float">
					<p class="num">×{{goodsIndex.selecNum}}</p>
				</div>
			</div>
			<div class="item-bottom">
				<p class="item-m-p" @click="selectDiscount">
					<span class="left">选择优惠券</span>
					<span class="right clear-float red"><span v-if="coupon">{{coupon}}</span>张可用<img src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/cor_right.png"/></span>
				</p>

			</div>
		</div>
		<div class="price-detail margin-t">
			<div class="price flex flex-item-between">
				<span>商品金额</span>
				<span>￥{{payAmount|fixedTwo()}}</span>
			</div>
			<div class="discount flex flex-item-between">
				<span>优惠金额</span>
				<span>￥{{goodsIndex.couponAmount|fixedTwo()}}</span>
			</div>
			<div class="freight flex flex-item-between">
				<span>运费</span>
				<span v-if="freight">￥{{freightWatch|fixedTwo()}}</span>
			</div>
		</div>
		<div class="submit flex">
			<div class="submit-price">
				实付金额：<span>￥{{payAmountTotal|fixedTwo()}}</span>
			</div>
			<div class="submit-click" :class="[pay]" @click="payment">
				提交
			</div>
		</div>
	</div>
</template>

<script>
	import http from '@/util/http'
	import Api from '@/util/api'
	import utils from '@/util/util'
	export default {
		data () {
			return {
				identity: ''
				,identityFlag: true
				,inscription: false
				,buttonText: '保存'
				,addressFlag: false
				,inscription: false
				,address: {}
				,freight: '0.00'
				,coupon: ''
			}
		}
		,created() {
			this.$vux.loading.show({
			 text: '加载中'
			});
			this.queryUserAddress()
			this.getfreight()
			this.getcoupon ()
		}
		,methods: {
			showDel(){
				this.identityFlag = true;
			}
			,getcoupon () {
				http.post(Api.couponGetEnableCouponNum,{
					counts: this.goodsIndex.selecNum
					,goodsId: this.goodsIndex.goodsId
					,goodsNormId: this.goodsIndex.normId
					,goodsNormName: this.goodsIndex.normName
				}).then(res => {
					if (res.code == 200) {
						this.coupon = ''+res.data;
					} else{
						this.toast(res.message)
					}
				})
			}
			,getfreight() {
				http.post(Api.getFreight,{
					counts: this.goodsIndex.selecNum
					,goodsId: this.goodsIndex.goodsId
					,goodsNormId: this.goodsIndex.normId
				}).then(res => {
					if (res.code == 200) {
						this.freight = ''+res.data;
					} else{
						this.toast(res.message)
					}
				})
			}
			,identitySave() {
				if (this.identityActive) {
					if (this.inscription) {
						this.inscription = false;
						this.identity = '';
						this.buttonText= '保存';
						return;
					}
					this.$vux.loading.show({
					 text: '保存中'
					});
					http.post(Api.updateAddressIdCard,{id: this.address.id, idCardNo: this.identity}).then(res => {
						this.$vux.loading.hide();
						if (res.code == 200) {
							this.inscription = true;
				            this.identity =this.identity.substr(0, 2) + "**************" + this.identity.substr(-2);
				            this.identityFlag = false;
				            this.buttonText= '编辑'
				            this.toast('保存成功')
						} else{
							this.toast(res.message)
						}
					})
				}
				
			}
			,clearidentity() {
				this.identity = '';
				this.buttonText= '保存';
				this.inscription = false;
			}
			,queryUserAddress() {
				http.post(Api.userQueryUserAddress,{ type: "N",userId:utils.getUserInfo().user.id}).then(res => {
					this.$vux.loading.hide();
					if (res.code == 200) {
						  if (res.data) {
						  	this.addressFlag = true;
						  	this.address = res.data || {};
						  }
				          if ((res.data && res.data.idCardNo) && res.data.idCardNo.indexOf('*') > 0) {
				          	this.inscription = true;
				          	this.identity = res.data.idCardNo;
				          	this.identityFlag = false;
				            this.buttonText =  this.inscription ? '编辑' : "保存"
				          }
					} else{
						this.toast('网络错误，请检查您的网络！')
					}
				})
			}
			,toAddadress(){
				this.$router.push({path:'/add-address',query:{'frompage':'/submit-goods'}})
			}
			,toSetletAddresslist(){
				this.$router.replace('/setlet-addresslist')
			}
			,selectDiscount() {
				if (parseInt(this.coupon) > 0) {
					this.$router.push('/select-coupon')
				}else{
					this.toast('没有优惠券')
				}
			}
			,payment() {
				if(this.pay) {
					let params = {
						addrId: this.address.id
						,counts: this.goodsIndex.selecNum
						,goodsId: this.goodsIndex.goodsId
						,goodsNormId: this.goodsIndex.normId
						,couponId: this.goodsIndex.couponId?this.goodsIndex.couponId:null
						,sourceFrom:"XCX"
					}
					http.post(Api.placeOrder,params).then(res => {
						if (res.code == 200) {
							this.$router.push('/pay/pay-center?orderId='+res.data.id)
						} else{
							this.toast(res.message)
						}
					})
				}
			}
		}
		,computed: {
			saveActive () {
				if (this.identity.length == 18) {
					return 'active'
				}else{
					return ''
				}
			}
			,identityActive() {
				if(this.identity.length == 18) {
					return true;
				} else {
					return false;
				}
			}
			,pay(){
				if (this.inscription && this.address.id) {
					return 'pay'
				}else{
					return ''
				}
			}
			,payAmount () {
				return parseInt(this.goodsIndex.price)*parseInt(this.goodsIndex.selecNum)
			}
			,freightWatch () {
				return parseInt(this.freight)
			}
			,payAmountTotal () {
				if (this.goodsIndex.couponAmount) {
					return (this.payAmount-this.goodsIndex.couponAmount+this.freightWatch)
				}else{
					return (this.payAmount+this.freightWatch)
				}
			}
			,goodsIndex() {
				return JSON.parse(sessionStorage.getItem('subInfo')) 
			}
		}
		,filters: {
			fixedTwo(price) {
				if(price) {
					return Number(price / 100).toFixed(2);
				}
				return "0.00";
			}
		}
	}
	
	
</script>

<style lang='less'>
	.goods-submit-goods {
		input::-webkit-input-placeholder {
			color: #909090;
			font-size: .24rem;
		}
		input:-moz-placeholder {
			color: #909090;
			font-size: .24rem;
		}
		input::-moz-placeholder {
			color: #909090;
			font-size: .24rem;
		}
		input:-ms-input-placeholder {
			color: #909090;
			font-size: .24rem;
		}
		height: 100%;
		background: #F2F2F2;
		.margin-t {
			margin-top: .18rem;
		}
		
		
		.addr-box{
		  height: 1.22rem;
		  padding-left: .3rem;
		  padding-right: .3rem;
		  background-color: #fff;
		}
		.addr-box .addr-icon{
		  width:.26rem;
		  height:.32rem; 
		}
		.addr-box .more-icon{
		  width:.3rem;
		  height:.35rem; 
		}
		.addr-content{
		  font-size:.28rem;
		  padding-left: .18rem;
		  padding-right: .18rem;
		  font-family:PingFangSC-Regular;
		  color:rgba(70,70,70,1);
		  line-height:.4rem;
		}
		.no-address{
		  font-size:.28rem;
		  font-family:PingFangSC-Regular;
		  display: block;
		  color: #909090;
		  text-align: center;
		}
		.identity {
			padding: .3rem;
			height: .62rem;
			background: #FFFFFF;
			justify-content: space-between;
			.active{
				background: #fbc200;
			}
			img{
				width: .3rem;
				height: .3rem;
				position: relative;
				top: .15rem;
			}
			.info-input{
				width: 5.18rem;
				height: .36rem;
				line-height: .36rem;
				font-size: .3rem;
				margin-top: .1rem;
				color: #464646;
			}
			.info-save{
				display: inline-block;
				font-size: .24rem;
				text-align: center;
				width: 1.34rem;
				height: .6rem;
				line-height: .6rem;
				color: #fff;
				background: #BCBCBC;
				border-radius: .14rem;
			}
			.active{
				background: #fbc200;
			}
		}
		.info {
			padding: .2rem 0 .2rem .88rem;
			height: .82rem;
			background: #FFFFFF;
			position: relative;
			img {
				width: .42rem;
				height: .42rem;
				position: absolute;
				top: .38rem;
			}
			.address-icon {
				left: .3rem;
			}
			.to-list-address {
				width: .3rem;
				height: .35rem;
				right: .26rem;
			}
			.content-p-fir {
				height: .4rem;
				line-height: .4rem;
				font-size: .28rem;
				color: #464646;
				.contentPhone {
					margin-left: .36rem;
				}
			}
			.content-p-sec {
				height: .33rem;
				line-height: .33rem;
				color: #909090;
				font-size: .24rem;
			}
		}
		.goods-item-info {
			margin-top: .18rem;
			background: #FFFFFF;
			.item-top {
				padding: .3rem;
				height: 1.5rem;
				.left-img {
					width: 1.32rem;
					height: 1.32rem;
					border: 1px solid #E6E6E6;
					border-radius: .06rem;
					position: relative;
					img {
						width: 1.32rem;
						height: 1.32rem;
						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
						margin: auto;
					}
				}
				.word {
					padding: 0 0 0 .3rem;
					font-size: .32rem;
					width: 4rem;
					.word-title {
						color: #464646;
						width: 5.27rem;
						height: .45rem;
						line-height: .45rem;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					.word-color {
						width: 5.27rem;
						margin-top: .15rem;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					.word-price {
						margin-top: .02rem;
					}
					.word-price,
					.word-color {
						color: #909090;
						font-size: .28rem;
						height: .4rem;
						line-height: .4rem;
					}
				}
				.word-right {
					padding: .22rem 0;
					margin-left: .3rem;
					font-size: .28rem;
					width: .9rem;
					height: .4rem;
					line-height: .4rem;
					text-align: right;
					border-top: 1px solid #F2F2F2;
					.num {
						margin-top: .8rem;
						color: #909090;
					}
				}
			}
			.item-bottom {
				height: .4rem;
				padding: .3rem 0;
				width: 6.9rem;
				margin-left: .3rem;
				border-top: 1px solid #F2F2F2;
			}
			.item-bottom {
				color: #909090;
				font-size: .3rem;
				.item-m-p {
					height: .4rem;
					line-height: .4rem;
					.coupon {
						color: #FC314C;
						font-size: .2rem;
					}
					.red {
						color: #ff4c5d;
						img{
							position: relative;
							top: .06rem;
							left: .06rem;
							width: .3rem;
							height: .35rem;
						}
					}
				}
			}
		}
		.price-detail {
			height: 3.02rem;
			padding: 0 .3rem;
			background: #FFFFFF;
			.price,
			.discount,
			.freight {
				height: 1rem;
				line-height: 1rem;
				border-bottom: 1px solid #F2F2F2;
				color: rgba(70, 70, 70, 1)
			}
		}
		.submit {
			width: 100%;
			position: absolute;
			bottom: 0;
			background: #FFFFFF;
			height: 1rem;
			line-height: 1rem;
			justify-content: space-between;
			.submit-price {
				font-size: .3rem;
				width: 60%;
				padding-left: .3rem;
				color:rgba(70, 70, 70, 1);
				span{
					color:#ff4c5d;
					font-size:.36rem;
					margin-left:.1rem;
				}
			}
			.submit-click {
				color: #464646;
				width: 40%;
				background: gray;
				text-align: center;
			}
			.pay{
				background: #fbc200;
			}
		}
	}
</style>